<template>
	
	
	<div>
		<div class="header1">
		    <span>项目信息</span>
		    <el-divider content-position="right"></el-divider>
		</div>
		<div class="content1" v-loading="loading">
			
			<template v-if="!isModifyPro" >
				<el-row class="content1Title" type="flex"  align="middle" >
					<el-col :span="3"  :offset="1"><span>项目名称</span>
					<el-divider direction="vertical"></el-divider>
					</el-col>
					<el-col :span="3"   :offset="1"><span>项目类型</span>
					<el-divider direction="vertical"></el-divider>
					</el-col>
					<el-col :span="5"   :offset="1"><span>项目简介</span>
					<el-divider direction="vertical"></el-divider></el-col>
					<el-col :span="3"   :offset="1"><span>项目图片</span>
					<el-divider direction="vertical"></el-divider></el-col>
					<el-col :span="3"   :offset="1"><span>项目成员</span>
					<el-col :span="1" ></el-col>
					<el-divider direction="vertical"></el-divider></el-col>
				</el-row>
					<template v-for="(item,n) in proData">
						<el-divider :key="n"></el-divider>
						<el-row  :key="n" style="margin-bottom: 1.75rem;" type="flex"  align="middle" >
							<el-col :span="3"  :offset="1">{{item.ProName}}</el-col>
							<el-col :span="3"  :offset="1">{{item.type}}</el-col>
							<el-col :span="5"   :offset="1" style="">{{item.ProInfo}}</el-col>
							<el-col :span="3" :offset="1">
								<el-image  :src="item.picture" style=""></el-image>																<!-- </div> -->
							</el-col>
							<el-col :span="3"   :offset="1" ><span v-for="e in item.members" :key="e.index">{{e.name}}<br></span></el-col>
							<el-col :span="1" ><el-button icon="el-icon-edit" type="primary" @click="editProject(item.id,n)" circle></el-button></el-col>
						</el-row>
					</template>
				<el-row  type="flex"  align="middle" justify="center">
					<el-col :span="5">
						<el-pagination
							@current-change="getMyProject"
							@prev-click="getMyProject"
							@next-click="getMyProject"
							background
							page-size="5"
							layout="prev, pager,next "
							:total="total">
						</el-pagination>
					</el-col>
				</el-row>
			</template>
			<el-row v-else type="flex" justify="center"  align="middle" style="margin-top:3.125rem;" v-loading="loading">
				<el-col :span="14">
					<el-card style="background-color: #FFFFFF">
						<el-row>
							<el-col :span="22">
								<el-form :model="proForm" ref="proForm" :rules="proRules"  label-position="left" style="font-weight: 700;">
									<el-form-item prop="name" label="项目名称" style="margin-top: 0.625rem;">
										<!-- <div > -->
											<el-input v-model="proForm.name" style="margin-left: 5%;  margin-right: 20%;width: 60%;"></el-input>
										<!-- </div> -->
									</el-form-item>
									<el-form-item prop="detail" label="项目简介">
										<!-- <div > -->
											<el-input type="textarea" maxlength="200"  show-word-limit rows="7" v-model="proForm.detail" style="margin-left: 5%;  margin-right: 20%;width: 60%;"></el-input>
										<!-- </div> -->
									</el-form-item>
									<el-form-item  label="图片">
										<!-- <div > -->
										
										<br>
										<el-row type="flex" align="bottom" justify="center">
											<el-col :span="16">
												<el-image  :src="proForm.picture" style=""></el-image>															<!-- </div> -->
											</el-col>
											<el-col  :span="10" :offset="1">
												 <el-tooltip content="替换" placement="top" style="">
													 <cutImageDialog  @formData="finish"   :aspectRatio="16 / 9"/>
												 </el-tooltip>
											</el-col>
										</el-row>
										<!-- <el-row type="flex" align="bottom">
											<el-col :span="16">
												<el-image  :src="proForm.picture" style=""></el-image>																<!-- </div> -->
											<!-- </el-col>
											<el-col  :span="10">
												 <el-tooltip content="替换" placement="top" style="">
													 <cutImageDialog  @formData="finish"   :aspectRatio="16 / 9"/>
												 </el-tooltip>
											</el-col> -->
										<!-- </el-row> --> 
										<!-- <br> -->
									</el-form-item>
									<el-form-item prop="teacher" label="指导老师">
										<!-- <div > -->
											<el-input v-model="proForm.teacher"  style="margin-left: 5%;  margin-right: 20%;width: 60%;"></el-input>
										<!-- </div> -->
									</el-form-item>
									<el-form-item prop="type1" label="项目类型">
										<!-- <div > -->
											 <el-radio-group v-model="proForm.type1" style="margin-left: 5%;  margin-right: 20%;width: 60%;">
												  <el-radio label="互联网+"  @change="other=false"></el-radio>
												  <el-radio label="大创"  @change="other=false"></el-radio>
												  <el-radio label="挑战杯"  @change="other=false"></el-radio>
												  <el-radio label="其他" @change="other=true"></el-radio>
												</el-radio-group>
										<!-- </div> -->
									</el-form-item>
									<el-form-item prop="id" label="项目类型" v-if="other">
										<!-- <div > -->
											<el-input v-model="proForm.type2" style="margin-left: 5%;  margin-right: 20%;width: 60%;"></el-input> 
										<!-- </div> -->
									</el-form-item>
									<el-form-item prop="userNum" label="成员数量">
										<!-- <div > -->
											<el-input v-model="proForm.userNum" style="margin-left: 5%;  margin-right: 20%;width: 60%;"></el-input>
										<!-- </div> -->
									</el-form-item>
									<el-form-item prop="userNum" label="成员管理">
										<el-table :data="proForm.members" >
											<el-table-column prop="name" label="成员"></el-table-column>
											<el-table-column prop="name" label="管理" width="60%">
												<el-tooltip content="移除" placement="top" style="" slot-scope="scope"> 
													<el-button type="danger" @click="quiteUser(scope.row.id)" class="el-icon-delete" size="mini" circle></el-button>	
												</el-tooltip>
											</el-table-column>
											
										</el-table>
									</el-form-item>
									<el-form-item style="text-align: center;">
										<el-button  style="width: 20%;" @click="isModifyPro = !isModifyPro">取消</el-button>
										<el-button  style="width: 20%;" type="success" @click="modifyPro('proForm')">保存</el-button>
									</el-form-item>
								</el-form>
							</el-col>
							<el-col :span="1">
								<el-button icon="el-icon-delete" type="danger" @click="deletePro"></el-button>
							</el-col>
						</el-row>
						
					</el-card>
				</el-col>
			</el-row >
		</div>
	</div>
  
</template>

<script>
import cutImageDialog  from './cut.vue' 
export default {
	components: {
	  cutImageDialog
	  
	},
	  props:{
	  	 proData:{
	  	        type:Array 
	  	    }
	  },
  data() {
		var checkNum = (rule, value, callback) => {
			// 
			if (!value) {
			  return callback(new Error('人数不能为空'));
			}else if(Number.isNaN(Number(value))){
				return callback(new Error('必须为数字'));
			}if(1>value || 20<value){
				return callback(new Error('必须在1-20'));
			}if(!Number.isInteger(Number(value))){
				return callback(new Error('必须为整数'));
			}else{
				callback();
				}
		};
		
    return {
			isModifyPro:false,
			proForm:{
				detail:"",
				name:"",
				userNum:"",
				teacher:"",
				type1:"",
				type2:"",
			},
			proRules:{
				name: [
						{ required: true, message: '请输入项目名称', trigger: 'blur' },
						{ min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
					],
				detail: [
						{ required: true, message: '请输入项目简介', trigger: 'blur' },
						{ min: 10, max: 200, message: '长度在 10 到 200 个字符', trigger: 'blur' }
					],
				userNum: [
						{required: true,  trigger: 'blur' },
						{ validator: checkNum}
					],
				teacher: [
						{ required: true, message: '请输入指导老师名称（多个逗号隔开）', trigger: 'blur' },
						{ min: 2, max: 30, message: '长度在 2 到 20 个字符', trigger: 'blur' }
					],
				type1: [
						{ required: true, message: '请输入项目类型', trigger: 'blur' }
					],
			},
			loading:false,
			total:0
			        
    }
  },
			
	 methods: {
		 finish:function(val){
			 console.log(val)
			 this.proForm.picFlie = val
			 
			 
		 	
		 },
		modifyPro:  function(formName){
			
			 this.$refs[formName].validate( (valid) => {
				  if (valid) {
					  this.$confirm('确认保存？', '确认信息', {
					  	distinguishCancelAndClose: true,
					  	confirmButtonText: '确认',
					  	cancelButtonText: '取消'
					  }).then(async () => {
						  this.loading = true;
						  
						  this.text(this.$api.uploadPicProject+"?id="+this.proForm.id ,this.proForm.picFlie,"post" )
						  
						  
						  
							if(this.proForm.typ1 === '其他'){
								this.proForm.typ1 = this.proForm.typ2
							}
							let postData = {
								"id":this.proForm.id,
								"name":this.proForm.name,
								"introduce":this.proForm.detail,
								"instructor":this.proForm.teacher,
								"type":this.proForm.type1,
								"userNum":this.proForm.userNum,
							}
							let res = await this.text(this.$api.modifyProject,postData,"post")
							
							if (res.code === 200) {
								this.$message({
									message: '修改成功',
									type: 'success'
									});
							location.reload();
								
							}else{
									this.$message.error('请求失败或者接口返回失败');
							} 
							this.loading = false;
						})
				  } else {
					this.$message.error('请输入数据');
					return false;
				  }
			})
		},
		
		editProject:function(id,n){
			this.isModifyPro = true
			this.proForm = {
				"id":id,
				"name":this.proData[n].ProName,
				"detail":this.proData[n].ProInfo,
				"teacher":this.proData[n].teacher,
				"type1":this.proData[n].type,
				"type2":this.proData[n].type,
				"userNum":this.proData[n].userNum,
				members:this.proData[n].members,
				picture:this.proData[n].picture
			}
			
		},
		
	
		getMyProject:async function (n) {
			this.proData.length=0
			this.proData.push()
			this.vive=2 
			if(this.$GLOBAL.isLogin){
				this.loading = true;
				let res = await this.text(this.$api.getNumProject +"?isGetMine=1","","get")
					
					if (res.code === 200) {
						this.total = res.data.num
						// 
					}else{
						this.$message.error('请求失败或者接口返回失败');
					}
				
				let beg = (n-1) * 5
				let end = n * 5
				
				res = await this.text(this.$api.showManyProject+"?page="+beg+"&num="+end+"&isGetMine=true","","get")
				
				if (res.code === 200) {
					let _this =this
					res.data.forEach(e => {
						let temp = []
						this.proData.push({
							id:e.project.id,
							ProName:e.project.name,
							ProInfo:e.project.introduce,
							members:e.members,
							type:e.project.type,
							userNum:e.project.userNum,
							teacher:e.project.instructor,
							time:this.$dateFormat(e.project.createTime),
							picture:this.$api.picTemplate+e.project.picture
					})
					});
				}else{
					 this.$message.error('请求失败或者接口返回失败');
				 }
				 this.loading = false;
			}
			
			
		},
		
		quiteUser:function(userId){
			this.$confirm('确认移出？', '确认信息', {
				distinguishCancelAndClose: true,
				confirmButtonText: '确认',
				cancelButtonText: '取消'
			}).then(async () => {
				let res = await this.text(this.$api.quiteUserProject +"?id=" + this.proForm.id + "&userId="+ userId)
					
					if (res.code === 200) {
						this.$message({
							message: '移除成功',
							type: 'success'
							});
							location.reload()
					}else if(res.code == 50033){
						this.$message.error('该用户为项目创建者');
					}else{
						this.$message.error('请求失败或者接口返回失败');
					}
			})
		},
		deletePro: function(){
			this.$confirm('确认删除？', '确认信息', {
				distinguishCancelAndClose: true,
				confirmButtonText: '确认',
				cancelButtonText: '取消'
			}).then(async () => {
				this.loading = true;
				let res = await this.text(this.$api.deleteProject+"?id="+this.proForm.id)
				
				if (res.code === 200) {
					this.$message({
						message: '删除成功',
						type: 'success'
						});
					location.reload();
					
				}else{
						this.$message.error('请求失败或者接口返回失败');
				} 
				this.loading = false;
			});
		},
		
   },
   created() {
   	this.getMyProject(1)
   }
	 }
</script>
<style scoped>
	@import url("../assets/style/info.css");
</style>
	